// pages/cart/index.js
import fetch from '../../request/index'
import { showModal, showToast } from '../../utils/asyncWx'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 地址数据
    address: {},
    // 购物车数据
    cart: [],
    // 购物车商品全选
    allChecked: false,
    // 商品总价
    goodsTotalPrice: 0,
    // 商品总数量
    goodsTotalNum: 0
  },
  // 监听页面显示
  onShow: function () {
    // 获取本地缓存中的地址数据
    const address = wx.getStorageSync('address') || {}
    // 获取本地缓存中的购物车数据
    const cart = wx.getStorageSync('cart') || []

    // 计算页面状态
    this.setCart(cart)

    // 更新data数据
    this.setData({ address })
  },
  // 点击获取收货地址
  handleChooseAddress() {
    // 获取用户收货地址
    // 调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址
    wx.chooseAddress({
      success(res) {
        // 数据处理 详细地址组合
        res.all = res.provinceName + res.cityName + res.countyName + res.detailInfo
        // 将地址数据存入缓存
        wx.setStorageSync('address', res)
      }
    })
  },
  // 封装更新页面状态方法
  setCart(cart) {
    // 计算是否全选、商品总价格、总数量
    let allChecked = true
    let goodsTotalPrice = 0
    let goodsTotalNum = 0
    // 遍历购物车数据
    cart.forEach((v) => {
      // 已选项
      if (v.checked) {
        // 总价 += 数量 * 单价
        goodsTotalPrice += v.num * v.goods_price
        // 总数量 += 数量
        goodsTotalNum += v.num
      } else {
        // 有未选直接取消全选
        allChecked = false
      }
    })
    // 当为空数组时直接返回一个false
    allChecked = cart.length ? allChecked : false
    // 更新到data中
    this.setData({ cart, allChecked, goodsTotalPrice, goodsTotalNum })
    // 更新到本地缓存中
    wx.setStorageSync('cart', cart)
  },
  // 购物车项选中
  handleItemChange(e) {
    // 获取被修改的商品对象id
    const goods_id = e.currentTarget.dataset.id
    // 获取购物车数组
    let { cart } = this.data
    // 找到要被修改的商品对象索引
    let index = cart.findIndex((v) => v.goods_id === goods_id)
    // 让其选中状态取反
    cart[index].checked = !cart[index].checked
    // 重新计算全选状态、总价、总数量
    this.setCart(cart)
  },
  // 商品全选功能
  handleAllChange() {
    /*
      1.全选复选框绑定事件
      2.获取data中的cart、allChecked数据
      3.全选按钮选中状态取反，allChecked = !allChecked
      4.遍历购物车数组，让其选中状态跟随allChecked变化
      5.把购物车数据和allChecked更新到data，把购物车更新到缓存中
     */
    // 获取data中的cart、allChecked数据
    let { cart, allChecked } = this.data
    // 全选按钮选中状态取反
    allChecked = !allChecked
    // 设置商品选中状态
    cart.forEach((v) => (v.checked = allChecked))
    // 调用更新页面状态方法
    this.setCart(cart)
  },
  // 商品数量编辑功能
  async handleItemNumEdit(e) {
    /*
      商品数量的编辑
      1."+""-"按钮 绑定同一个事件 用自定义属性区分
      2.传递点击的商品对象id goods_id
      3.获取data中的购物车数组，来获取需要被修改的商品对象
      4.直接修改商品对象的数量 num
        弹出提示(wx.showModal()) 当 数量为 1 时 点击 减号进行 删除
      5.把cart数组更新回data和缓存中 this.setCart() 自己封装的方法
    */
    // 获取传递参数(自定义属性)
    const { id, operation } = e.target.dataset
    // 获取data中的购物车数组
    let { cart } = this.data
    // 找到需要修改的商品索引
    const index = cart.findIndex((v) => v.goods_id === id)
    // 判断商品是否要执行删除
    if (cart[index].num <= 1 && operation === -1) {
      // 弹窗提示
      const res = await showModal({ content: '是否删除该商品？' })
      if (res.confirm) {
        // 执行删除操作
        cart.splice(index, 1)
        // 更新数据、缓存
        this.setCart(cart)
      }
    } else {
      // 修改商品数量
      cart[index].num += parseInt(operation)
      // 更新数据、缓存
      this.setCart(cart)
    }
  },
  // 商品结算功能
  async handlePay() {
    /**
     * 商品结算功能
     * 1.判断 用户是否设置了收获地址
     * 2.判断 用户是否选购了商品
     * 3.跳转 到支付页面
     */
    const { address, goodsTotalNum } = this.data
    // 1.判断 用户是否设置了收获地址
    // 没有设置收货地址
    if (!address.userName) {
      // 弹窗提示 用户是否添加收货地址
      const res = await showModal({ content: '请先设置收货地址！前往设置？' })
      if (res.confirm) {
        // 设置地址
        this.handleChooseAddress()
      }
      return
    }
    // 2.判断 用户是否选购了商品
    if (goodsTotalNum === 0) {
      // 弹窗提示 用户需要选中需要结算的商品
      await showToast({ title: '请先勾选预购商品！' })
      return
    }
    // 3.跳转 到支付页面
    wx.navigateTo({ url: '/pages/pay/index' })
  }
})
